<style lang="scss" scoped>
#main{
    height: 100%;
    overflow: hidden;
    .mainbg{
        width:100%;
        height:100%;
        background: url('/static/images/children.jpg') no-repeat center; 
        // background-size: 100% 100%;
        // -moz-background-size: 100% 100%;
        // -webkit-background-size: 100% 100%;
        padding-bottom: 68px;
        margin-bottom: -68px;
        .sys-list{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            p{
                cursor: pointer;
                background-color: rgba(67, 106, 140, 0.6);
                border: 1px solid rgba(255, 255, 255, 0);
                &:hover {
                    background-color: rgba(67, 106, 140, 0.9);
                }
                img{
                    display: block;
                    float: left;
                }
                span{
                    text-align: left;
                    float: left;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}
@media screen and (min-width:1600px){
    .sys-list {
        width: 400px;
        height: 560px; 
        p {
            width: 400px;
            height: 120px;
            line-height: 20px;
            border-radius: 10px;
            margin-bottom: 30px; 
            img {
                width: 80px;
                height: 80px;
                margin: 20px;
            }
            span {
                height: 41px;
                line-height: 41px;
                font-size: 28px;
                margin-top: 40px;
            }
        }
    }
}

@media (min-width:1400px) and (max-width:1600px){
    .sys-list {
        width: 300px;
        height: 420px;
        p {
            width: 300px;
            height: 90px;
            line-height: 15px;
            border-radius: 7.5px;
            margin-bottom: 22.5px;
            img {
                width: 60px;
                height: 60px;
                margin: 15px;
            }
            span {
                height: 31px;
                line-height: 31px;
                font-size: 21px;
                margin-top: 30px;
            }
        }
    }
}

@media (min-width:1300px) and (max-width:1400px){
    .sys-list {
        width: 283px;
        height: 397px; 
        p {
            width: 283px;
            height: 85px;
            line-height: 14.2px;
            border-radius: 7px;
            margin-bottom: 21.25px; 
            img {
                width: 56.67px;
                height: 56.67px;
                margin: 14.2px;
            }
            span {
                height: 29px;
                line-height: 29px;
                font-size: 19.8px;
                margin-top: 28.3px;
            }
        }
    }
}

@media (min-width:1200px)  and (max-width:1300px){
    .sys-list {
        width: 266px;
        height: 373px; 
        p {
            width: 266px;
            height: 80px;
            line-height: 13px;
            border-radius: 6.67px;
            margin-bottom: 16.7px; 
            img {
                width: 53.3px;
                height: 53.3px;
                margin: 13px;
            }
            span {
                height: 27.3px;
                line-height: 27.3px;
                font-size: 18.67px;
                margin-top: 26.67px;
            }
        }
    }
}
@media(max-width:1200px){
    .sys-list {
        width: 213px;
        height: 298px; 
        p {
            width: 213px;
            height: 64px;
            line-height: 10.7px;
            border-radius: 5.3px;
            margin-bottom: 16px; 
            img {
                width: 42.6px;
                height: 42.6px;
                margin: 10.7px;
            }
            span {
                height: 21.9px;
                line-height: 21.9px;
                font-size: 15px;
                margin-top: 21.3px;
            }
        }
    }
}
</style>

<template>
    <div id="main">
        <main-header class="main-header"></main-header>
        <!-- <div style="height:68px;"></div> -->
        <div class="mainbg">
            <div class="sys-list">
                <p @click="goRare" class="p1">
                    <img src="/static/images/home/hjb.png">
                    <span>罕见病检测平台</span>
                </p>
                <p @click="goGenetic" class="p2">
                    <img src="/static/images/home/ycxzl.png">
                    <span>遗传性肿瘤检测平台</span>
                </p>
                <p class="p3">
                    <img src="/static/images/home/zl.png">
                    <span>肿瘤检测平台</span>
                </p>
                <p @click="familyTree" class="p4">
                    <img src="/static/images/home/tu1.png">
                    <span>家树系统</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import mainHeader from '@/components/mainHeader.vue';
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
export default {
    name: "main",
    methods: {
        goRare() {
            this.$store.state.productId = '1';
            this.$router.push("/rare");
        },
        goGenetic() {
            this.$store.state.productId = '2';
            this.$router.push("/tumor");
        },
        tumor() {
            this.$store.state.productId = '3';
            this.$router.push("/rare");
        },
         familyTree() {            
            this.$store.state.productId = '4';
            delCookie('productId')
            delCookie('currentSys')
            setCookie('productId', '4', null)
            var name = "家树系统"
            setCookie('currentSys', name, null)
            this.$store.state.currentSys = "家树系统";
            this.$router.push("/familyMain");
        }
    },
    created() {
        this.$store.state.pageindex = 1;
    },
    components: {
        mainHeader
    },
    mounted() {
        document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 192 + 'px';
    },
}
</script>
